<template>
    <div class="MoneyResult">
        <p class="adress" v-if="!addressjson.id&&productType=='1'" @click="toNext('addressMangeSet')">
            <img src="../../assets/matterlineitem_icon.png@2x.png" alt="">
            <span>管理收货地址</span>
        </p>
        <div v-if="addressjson.id&&productType=='1'">
            <div class="addressjson" v-if="addressjson.isDefault" @click="toNext('addressMangeSet')">
                <p>{{addressjson.contact | sliceString(14)}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{addressjson.phone}}</p>
                <p>{{addressjson.address | sliceString(16)}}</p>
                <div class="icob"><img src="./../../assets/icon_click.png@2x.png" alt=""></div>
            </div>
        </div>
        <div class="imgshou" v-for="(item,index) in selctlists" :key="index">
            <img :src="item.picUrl" alt="">
            <div class="cont">
                <p>
                    <span class="s">{{item.productName | sliceString(15)}}</span>
                    <span></span>
                </p>
                <p>
                    <span>￥{{(item.salePrice*1000)/1000}}</span>
                    <span>x{{item.buyNumber}}</span>
                </p>
                <p class="guige">
                    <span v-for="(itemchild,indexchild) in item.specList" :key="indexchild">
                        {{itemchild.specName}}
                    </span>
                </p>
            </div>
        </div>
        <div class="redius" style="margin-bottom:0.5rem" @click="clickshowquan">
            <span>商品优惠</span>
            <span v-if="vouchersTotal&&(vouchersTotal!=0)">-{{vouchersTotal}}元</span>
            <span v-if="(!vouchersTotal)||(vouchersTotal==0)">
                <span class="useState" v-if="mchtCouponLists.length">{{mchtCouponLists.length?mchtCouponLists[0].couponName:''}}</span><img src="../../assets/btn_back.png" alt=""></span>
        </div>
        <div class="redius">
            <span>运费</span>
            <span>{{seltotals.freight}}元</span>
        </div>
        <!-- <div class="rediusfour"><p><span>总计</span><span>{{seltotals.shopprice}}元+{{seltotals.shopIntergral}}积分</span></p></div> -->
        <div class="rediusfour">
            <p>
                <span>总计</span>
                <span>{{seltotals.shopprice}}元</span>
            </p>
        </div>
        <div class="rediuslast buttonboxs fiexd" ref="fixedbox">
            <span>实付金额:&nbsp;
                <span>￥</span>
                <span>{{payNum}}</span>
                <span></span>
            </span>
            <span class="box" @click="payend(addressjson.id)">确认支付</span>
        </div>
        <!-- 选择支付类型 -->
        <mt-popup position="bottom" class="bottoms" v-model="specifiCations">
            <div class="zong">
                <div class="hide" @click="hideSpecifiCations">x</div>
                <div class="guige">
                    <div class="sel">
                        <p>支付类型选择：</p>
                        <select v-model="selectedtype">
                            <!-- <option value="1" >积分+现金</option> -->
                            <option value="2">纯现金</option>
                            <!-- <option  value="3">纯积分</option> -->
                        </select>
                    </div>
                    <div class="sel">
                        <p>支付渠道选择：</p>
                        <select v-model="selectedchannel">
                            <!-- <option value="1" selected>汇卡宝</option> -->
                            <option value="2">芸券</option>
                        </select>
                    </div>
                </div>
                <div class="numbutton" @click="payend(addressjson.id)">
                    确认支付
                </div>
            </div>
        </mt-popup>
        <!-- 选择支付类型 -->

        <!--优惠券选择 -->
        <div class="chooseCouponContent" v-if="showquan">
            <mt-popup position="bottom" class="bottoms" v-model="showquan">
                <div class="couponChoose">
                    <div class="hides mt10 mb10 fs18 lh18" @click="hidequan">选择优惠</div>
                    <div class="quans" v-for=" (item,index) in mchtCouponLists" :key='index'>
                        <div class="left">
                            <p>{{item.couponName}}</p>
                            <p class="colors">面值：{{item.denomination|denomination(item.type)}} &nbsp;&nbsp;&nbsp;
                                <span>数量：{{item.usableCount}}张</span>
                            </p>
                            <p>有效期：{{item.validatyBeginDesc}}至{{item.validatyEndDesc}}</p>
                        </div>
                        <div class="right">
                            <span>
                                <check-icon :value.sync="item.haveclick"></check-icon>
                            </span>
                        </div>
                    </div>

                </div>
                <div class="wan" @click="quanok()">完成</div>
            </mt-popup>
        </div>
        <div v-if="phoneState">
            <div class="model"></div>
            <div class="phoneTxt">
                <div class="phoneTxt_title">
                    <h3>注意</h3>
                    <h4>请填写用户名和手机号</h4>
                </div>
                <div class="phoneTxt_name"><input v-model="phoneTxt_name" type="text" placeholder="请输入用户名"></div>
                <div class="phoneTxt_phone"><input maxlength="11" v-model="phoneTxt_phone" type="text" placeholder="请输入手机号"></div>
                <div class="phoneTxt_btn">
                    <div @click="phoneState=false">取消</div>
                    <div @click="btnPhone">确定</div>
                </div>
            </div>
        </div>
        <!--优惠券选择 -->
        <div style="height:4.5rem" v-if="!showquan"></div>
    </div>
</template>
<script>
import { Group, XNumber, CheckIcon } from "vux";
import { MessageBox, Toast } from "mint-ui";
import {
    bindUserInfoPhone,
    orderCoupon,
    sureCreateOrders,
    createShoppingOrders,
    getAddressList,
    createOrder,
    integralExchangeProduct,
    hkbOrderpay
} from "src/methods/request.js";
import mixins from 'mixins';
export default {
    mixins: [mixins],
    data() {
        return {
            route: {},
            addressjson: {},
            Integral: "",
            salePrice: "",
            productName: "",
            productNo: "",
            orderres: {},
            addshow: "",
            productType: "",
            imgurls: "",
            freight: "",
            buynum: 1,
            specifiCations: false,
            selectedtype: "2",
            selectedchannel: "2",
            showquan: false,
            payNum: 0,
            chooseCoupon: [],
            vouchersTotal: "", //优惠金额
            phoneState: false,
            phoneTxt_phone: "",
            phoneTxt_name: ""
        };
    },
    created() {
        this.route = Object.assign({}, this.$route);
        this.payNum = this.seltotals.shopprice;
    },
    computed: {
        imgUrl() {
            return this.$store._modules.root._children.a.state;
        },
        tot() {
            return (this.salePrice * this.buynum).toFixed(2) - 0;
        },
        totalp() {
            return (
                (this.salePrice * this.buynum).toFixed(2) -
                0 +
                parseInt(this.freight)
            );
        },
        selctlists() {
            return this.$store.state.d.selctlist;
        },
        seltotals() {
            return this.$store.state.d.seltotal;
        },
        noselctarrs() {
            return this.$store.state.d.noselctarrs;
        },
        mchtCouponLists() {
            return this.$store.state.e.mchtCouponList;
        },
        shopLists: {
            get: function() {
                return this.$store.state.d.peoductlist;
            },
            set: function(index) {}
        }
    },
    mounted(){
        this.quanok();
    },
    components: {
        XNumber,
        Group,
        CheckIcon
    },
    methods: {
        btnPhone() {
            if (
                !/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9])\d{8}$/.test(
                    this.phoneTxt_phone
                )
            ) {
                Toast({
                    message: "手机号码有误，请重填",
                    duration: 1000
                });
                return false;
            }
            this.$vux.loading.show({
                text: "Loading"
            });
            bindUserInfoPhone({
                phone: this.phoneTxt_phone,
                name: this.phoneTxt_name
            })
                .then(res => {
                    if (res.rspCode == "0000") {
                        this.payend(this.addressjson.id);
                    } else {
                        Toast({
                            message: "绑定失败",
                            position: "middle",
                            duration: 1000
                        });
                    }
                    this.phoneState = false;
                    this.$vux.loading.hide();
                })
                .catch(
                    error => (this.phoneState = false),
                    this.$vux.loading.hide()
                );
        },
        clickshowquan() {
            if (this.mchtCouponLists.length > 0) {
                this.showquan = true;
            } else {
                Toast({
                    message: "暂无优惠券可选",
                    position: "middle",
                    duration: 1000
                });
            }
        },
        hidequan() {
            this.showquan = false;
        },
        quanok() {
            this.chooseCoupon = [];
            for (var i = 0; i < this.mchtCouponLists.length; i++) {
                var item = this.mchtCouponLists[i];
                if (item.haveclick) {
                    this.chooseCoupon.push({
                        userCouponNo: item.userCouponNo,
                        couponNo: item.couponNo,
                        productNo: item.productNo
                    });
                }
            }
            if (this.chooseCoupon.length > 1) {
                Toast({
                    message: "暂只支持使用一张优惠券！",
                    position: "center",
                    duration: 1000
                });
                return;
            }
            orderCoupon({
                productList: this.selctlists,
                vouchersList: this.chooseCoupon
            }).then(res => {
                if (res.data.resultCode == "00") {
                    this.payNum = res.data.salePriceTotal;
                    this.vouchersTotal = res.data.vouchersTotal;
                }
            });
            this.showquan = false;
        },
        payend(id) {
            if (this.productType == "1") {
                if (!id) {
                    MessageBox("", "请设置地址");
                    return false;
                }
            } else {
                id = "";
            }
            if (sessionStorage.getItem("isHkb") != "2") {
                //如果是汇卡宝用户
                if (this.selectedchannel == "2") {
                    //选择芸券
                    // MessageBox('', '暂不支持芸券支付');
                    Toast({
                        message: "暂不支持芸券支付",
                        position: "center",
                        duration: 1000
                    });
                } else {
                    //选择汇卡宝
                    let shopjon = {
                        addressId: id,
                        productList: this.selctlists,
                        msg: "",
                        vouchersList: this.chooseCoupon
                    };
                    //paytype:"1"//汇卡宝"2"//芸券
                    this.createOrders(shopjon, "1"); // 下单，走汇卡宝
                }
            } else {
                //非汇卡宝用户
                if (this.selectedchannel == "1") {
                    //选择汇卡宝
                    // MessageBox('', '暂不支持汇卡宝支付');
                    Toast({
                        message: "暂不支持汇卡宝支付",
                        position: "center",
                        duration: 1000
                    });
                } else {
                    //选择芸券
                    let shopjon = {
                        addressId: id,
                        productList: this.selctlists,
                        msg: "",
                        vouchersList: this.chooseCoupon
                    };
                    //paytype:"1"//汇卡宝"2"//芸券
                    this.createOrders(shopjon, "2"); // 下单，走汇卡宝
                }
            }
        },
        createOrders(shopjon, paytype) {
            this.$vux.loading.show({
                text: "Loading"
            });
            let vouchersList = this.chooseCoupon;
            createShoppingOrders(shopjon, paytype)
                .then(response => {
                    if (response.rspCode == "0000") {
                        if (response.data.resultCode == "04") {
                            this.specifiCations = false;
                            this.phoneState = true;
                            return;
                        }
                        let orderLists = Object.assign({}, response.data);
                        let orderNo = orderLists.orderNo;
                        if (paytype == "1") {
                            ("汇卡宝支付");
                            this.$router.push({
                                path: "/hkbPayfrom",
                                query: { orderNo: orderNo }
                            });
                        } else {
                            this.payShop(orderNo);
                        }
                    } else {
                        // MessageBox('', '下单失败');
                        Toast({
                            message: "下单失败",
                            position: "center",
                            duration: 1000
                        });
                        return false;
                    }
                    this.$vux.loading.hide();
                })
                .catch(error => console.log(error), this.$vux.loading.hide());
        },
        hideSpecifiCations() {
            this.specifiCations = false;
        },
        change(val) {
            this.buynum = val;
        },
        getadresslist() {
            //详情穿来数据
            this.productType = this.seltotals.shopType;
            if (this.productType == "3") {
                this.addshow = false;
            } else if (this.productType == "1") {
                this.addshow = true;
            }
            //添加地址
            getAddressList({})
                .then(response => {
                    var selectid = this.route.query.id || this.$store.state.b.cateId;
                    let list = Object.assign([], response.data.addressList);
                    !selectid && (this.addressjson = list.find(item => item.isDefault == 0));
                    selectid && (this.addressjson = list.find(item => item.id == selectid));
                })
                .catch(error => console.log(error));
        },
        // 支付
        payShop(orderNo) {
            this.$vux.loading.show({
                text: "Loading"
            });
            integralExchangeProduct({ orderNo: orderNo })
                .then(response => {
                    if (response.rspCode == "0000") {
                        if (response.data.resultCode == "00") {
                            this.$router.push({
                                path: "/payMoneyEnd",
                                query: {}
                            });
                            Toast({
                                message: "支付成功",
                                position: "center",
                                duration: 1000
                            });
                        } else if (response.data.resultCode == "04") {
                            if (response.data.content == undefined) {
                                Toast({
                                    message: "支付系统异常",
                                    position: "center",
                                    duration: 1000
                                });
                            }
                            window.open(response.data.content, "_self");
                        } else if (response.data.resultCode == "01") {
                            Toast({
                                message: "积分不足",
                                position: "center",
                                duration: 1000
                            });
                        } else if (response.data.resultCode == "02") {
                            Toast({
                                message: "系统繁忙",
                                position: "center",
                                duration: 1000
                            });
                        } else {
                            Toast({
                                message: "支付失败",
                                position: "center",
                                duration: 1000
                            });
                        }
                        Toast({
                            message: "欢迎进入'我的订单'!",
                            position: "middle",
                            duration: 1000
                        });
                        this.$router.push({ path: "/myOrder" });
                    } else {
                        Toast({
                            message: "支付失败",
                            position: "center",
                            duration: 1000
                        });
                        Toast({
                            message: "欢迎进入'我的订单'!",
                            position: "middle",
                            duration: 1000
                        });
                        this.$router.push({ path: "/myOrder" });
                    }
                    this.$vux.loading.hide();
                })
                .catch(error => console.log(error));
        },
        async payMoney(id) {
            //实物地址判断
            if (this.productType == "1") {
                if (!id) {
                    MessageBox("", "请设置地址");
                    return false;
                }
            } else {
                id = "";
            }
            this.specifiCations = true;
        }
    },
    beforeRouteLeave (to, from, next) {
        //页面离开时清除vuex中的地址数据
        this.$store.commit('deleteCateId');
        next();
    },
    watch: {
        route() {
            this.route.path == "/shopResult" && this.getadresslist();
        }
    }
};
</script>
<style lang="less" scoped>
.couponChoose {
    min-height: 5rem;
    max-height: 18rem;
    width: 100%;
    overflow-y: auto;
}
.bottoms {
    width: 100%;
    padding: 0 0 10px 0;
    box-sizing: border-box;
    .hide {
        border-bottom: 1px solid #d1d1d1;
        height: 40px;
        line-height: 40px;
        width: 94%;
        margin-left: 3%;
        text-align: center;
        margin-bottom: 20px;
    }
    .quans {
        margin: 0 3% 10px;
        width: 94%;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: space-around;

        border-radius: 13px;
        .left {
            text-indent: 0.7rem;
            background-color: #f1f2f3;
            width: 70%;
            text-align: left;
            border-radius: 13px;
            border-right: 2px solid #ffffff;
            p {
                height: 30px;
                line-height: 30px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                &:nth-of-type(1) {
                    position: relative;
                    top: 0.6rem;
                }
                &:nth-of-type(3) {
                    font-size: 0.8rem;
                }
            }
            .colors {
                color: #ed6e36;
                font-size: 0.8rem;
                position: relative;
                top: 0.7rem;
            }
        }
        .right {
            width: 30%;
            height: 90px;
            border-radius: 13px;
            background-color: #f1f2f3;
            span {
                position: relative;
                top: 34px;
                left: 15px;
            }
            p {
                display: block;
                text-align: center;
                width: 75px;
                height: 30px;
                color: #ffffff;
                line-height: 30px;
                border-radius: 10px;
                background-color: rgb(4, 0, 255);
            }
        }
    }
    .wan {
        box-sizing: border-box;
        margin-left: 3%;
        width: 94%;
        height: 40px;
        line-height: 40px;
        border-radius: 13px;
        font-size: 18px;
        color: #ffffff;
        background-color: #ed6e36;
    }
}

.xnumber {
    margin: 0px;
    padding: 0px;
}
.xnumber:before {
    border: none;
}
.MoneyResult {
    padding-top: 6px;
    position: fixed;
    top: 40px;
    width: 100%;
    height: 100%;
    background-color: #f1f2f3;
    overflow-x: auto;
    padding-bottom: 4rem;
    box-sizing: border-box;
    .s {
        text-align: left;
        word-break: break-all;
        letter-spacing: 0px;
    }
    .addressno {
        height: 2rem;
        background-color: #fff;
        margin-bottom: 0.5rem;
        line-height: 2rem;
    }
    .addressjson {
        min-height: 4rem;
        padding: 10px 10px 0px 10px;
        background-color: #fff;
        box-sizing: border-box;
        margin-bottom: 0.5rem;
        position: relative;
        font-size: 15px;
        p {
            width: 90%;
            min-height: 2rem;
            line-height: 2rem;
            text-align: left;
            word-break: break-all;
            letter-spacing: 0px;
            margin-bottom: 10px;
        }
        p:nth-child(2) {
            line-height: 22px;
            padding-bottom: 20px;
        }
        .icob {
            width: 10%;
            display: block;
            position: absolute;
            top: 50%;
            right: 5px;
            margin-top: -11px;
            img {
                width: 10px;
                height: 22px;
            }
        }
    }
    .adress {
        height: 5rem;
        width: 100%;
        background-color: #fff;
        // line-height: 8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0.5rem 0 0.5rem 0;
        img {
            height: 1.8rem;
            margin-right: 0.7rem;
        }
        span {
            font-size: 15px;
            color: #ed6e36;
        }
    }
    .imgshou {
        height: 9rem;
        display: flex;
        background-color: #fff;
        align-items: center;
        padding: 0px 10px 0px 10px;
        box-sizing: border-box;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        img {
            height: 6rem;
            width: 9rem;
            border-radius: 7px;
            background-color: red;
        }
        .cont {
            width: 100%;
            height: 6.5rem;
            padding-left: 10px;
            p {
                height: 2rem;
                line-height: 2rem;
                display: flex;
                box-sizing: border-box;
                justify-content: space-between;
            }
            p:nth-child(2) {
                height: 2.5rem;
                line-height: 2.5rem;
            }
            .guige {
                justify-content: flex-start;
                span {
                    margin-right: 10px;
                }
            }
        }
    }
    .one {
        margin-bottom: 0.5rem;
        span:nth-child(2) {
            color: #ed6e36;
        }
    }
    .rediuslast {
        height: 3rem;
        display: flex;
        padding: 0px 10px 0px 10px;
        box-sizing: border-box;
        align-items: center;
        box-sizing: border-box;
        justify-content: flex-end;
        background-color: #fff;
        font-size: 13px;
        span {
            span:nth-child(1) {
                font-size: 13px;
                color: #ed6e36;
            }
            span {
                font-size: 18px;
                color: #ed6e36;
            }
        }
    }
    .redius {
        height: 4rem;
        display: flex;
        padding: 0px 10px 0px 10px;
        box-sizing: border-box;
        align-items: center;
        box-sizing: border-box;
        justify-content: space-between;
        background-color: #fff;
        img {
            height: 30px;
            margin-top: 5px;
            transform: rotate(180deg);
        }
    }
    .redi {
        height: 4rem;
        display: flex;
        padding: 0px 10px 0px 10px;
        box-sizing: border-box;
        align-items: center;
        box-sizing: border-box;
        justify-content: space-between;
        background-color: #fff;
        margin-bottom: 0.5rem;
        
        img {
            height: 25px;
            margin-top: 5px;
            transform: rotate(180deg);
        }
    }
    .rediusfour {
        height: 3rem;
        padding: 0px 10px 0px 10px;
        box-sizing: border-box;
        background-color: #fff;
        p {
            height: 3rem;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            justify-content: space-between;
            border-bottom: 1px solid #f1f0f0;
        }
    }
    .fiexd {
        position: fixed;
        bottom: 0px;
    }
    .buttonboxs {
        width: 100%;
        height: 4rem;
        padding: 0px !important;
        margin-top: 50px;
        left: 0px;
        right: 0px;
        .box {
            margin-left: 10px;
            display: flex;
            font-size: 18px;
            align-items: center;
            height: 100%;
            width: 100px;
            justify-content: center;
            background-color: #ed6e36;
            color: #fff;
        }
    }
}
.MoneyResult::-webkit-scrollbar {
    display: none;
}
.model {
    width: 100%;
    height: 100%;
    background: #999999;
    opacity: 0.7;
    position: absolute;
    left: 0;
    top: 0;
}
.phoneTxt {
    // height: 7rem;
    text-align: center;
    position: absolute;
    top: 7rem;
    left: 10%;
    background: #ffffff;
    width: 80%;
    border-radius: 1rem;
    .phoneTxt_title {
        margin: 1rem 0 0.5rem;
        h3 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }
    }
    .phoneTxt_name,
    .phoneTxt_phone {
        text-align: left;
        // height: 2rem;
        // line-height: 2rem;
        margin-left: 1rem;
    }
    input {
        border-bottom: 1px solid #d3d3d7;
        height: 3rem;
        width: 92%;
    }
    .phoneTxt_btn {
        & div {
            width: 50%;
            height: 3rem;
            line-height: 3rem;
            float: left;
            border-radius: 1px solid red;
        }
        div:nth-of-type(1) {
            color: #218bff;
        }
        div:nth-of-type(2) {
            background: #ff3b30;
            color: #ffffff;
            border-bottom-right-radius: 1rem;
        }
    }
}
.useState {
    position: relative;
    top: -0.8rem;
    left: -0.5rem;
    color: #ffffff;
    background: #f54841;
    height: 1.4rem;
    padding: 5px 10px;
    border-radius: 14px;
    font-size: 0.8rem;
}
</style>


